<template>
  <el-card class="box-card" shadow="hover" :body-style="{ padding: '0px 5px' }">
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">软件更新</span>

        <div class="rjfl-tabs">
          <div
            class="tab"
            :class="{ act: act.name == it.name }"
            v-for="it in data.typeSoftVos"
            :key="it.name"
            @mouseover="act = it"
          >
            <span>{{ it.name }}</span>
          </div>
        </div> 

        <span class="rjfl-more"
        @click="gotoRouter('/page/387_'+act.id+'_0_0_1.html',$router)"
          >更多
          
        </span>
      </div>
    </template>

    <div class="softs">
      <div class="softs-list" v-for="j in 2" :key="j">
        <div class="soft" v-for="i in 9" :key="i">
          <span class="sftag" @click="gotoList(387 + '_' + act.id + '_0_0_1', $router)"
            >[{{
              act.softVoList[i - 1 + (j - 1) * 9]
                ? act.softVoList[i - 1 + (j - 1) * 9].thirdStageName
                : "占位字符"
            }}]</span
          >
          <span
            class="sftitle"
            @click="
              act.softVoList[i - 1 + (j - 1) * 9] &&
                gotoDetail(act.softVoList[i - 1 + (j - 1) * 9], $router, axios)
            "
            >{{
              act.softVoList[i - 1 + (j - 1) * 9]
                ? act.softVoList[i - 1 + (j - 1) * 9].name
                : "占位字符"
            }}</span
          >
          <span class="sftime">{{
            act.softVoList[i - 1 + (j - 1) * 9]
              ? act.softVoList[i - 1 + (j - 1) * 9].createTime
              : "2021-12-12 16:10:39"
          }}</span>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import HotTutorialList from "./HotTutorialList.vue";
import { ref, computed, defineProps, onBeforeMount } from "vue";

const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
});

const act = ref(props.data.typeSoftVos[0]);

// const act.softVoList = computed(() => act.softVoList || []);
// const rightValue = computed(() => props.data[act.value.hotkey]);
</script>

<style lang="less" scoped>
.softs {
  display: flex;
  flex-direction: column;

  &-list {
    display: flex;
    flex-flow: wrap;
    flex-wrap: row;
    justify-content: space-between;
    padding: 10px 20px;

    .soft {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 370px;
      height: 40px;

      .sftag {
        font-size: 14px;
        font-weight: 400;
        color: #93999e;
        line-height: 14px;
        cursor: pointer;
        &:hover {
          color: @link-color;
        }
      }

      .sftitle {
        flex: 1;
        margin-left: 10px;
        font-size: 14px;
        font-weight: 400;
        color: #1d2127;
        line-height: 14px;
        cursor: pointer;

        &:hover {
          color: @link-color;
        }
      }

      .sftime {
        font-size: 14px;
        font-weight: 400;
        color: #93999e;
        line-height: 14px;
      }
    }
  }
}

.rjfl-tabs {
  display: flex;
  justify-content: flex-start;
  flex: 1;
  padding-left: 80px;
  .tab {
    display: flex;
    position: relative;
    justify-content: center;
    width: 100px;
    cursor: pointer;
    span {
      font-size: 16px;
      font-weight: 500;
      color: #93999e;
      line-height: 16px;
    }
  }

  .act {
    span {
      color: @theme-color;
    }
  }
  .act:after {
    position: absolute;
    content: " ";
    border-bottom: 2px solid @theme-color;
    width: 32px;
    bottom: -19px;
  }
}

@media screen and (max-width: 1366px) {
  .soft {
    width: 350px !important;
  }
}
</style>
